<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>航班预订系统</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>

<body>
    <!-- 主页面 -->
    <div id="main" class=" ">
        <!-- 导航条 -->

        <nav class="navbar navbar-expand-sm bg-primary-subtle navbar-black">
            <!-- 两边留有边距 -->
            <div class="container">
                <!-- 名称 -->
                <a href="#" class="navbar-brand">航班预定系统</a>
                <!-- 可折叠导航栏 -->
                <div class="collapse navbar-collapse ">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a href="#" class="nav-link" id="nav1">首页</a>
                        </li>
                        <li class="nav-item">
                            <a href="#" class="nav-link" id="nav2">订单</a>
                        </li>
                        <li class="nav-item">
                            <a href="#" class="nav-link" id="nav3">个人行程</a>
                        </li>
                    </ul>
                </div>
                <!-- 登陆注册按钮 -->
                <div class="loginButton">
                    <a href="登陆注册界面 普通用户.html" id="login" class="btn btn-outline-secondary">登录/注册</a>
                </div>
                
            </div>
        </nav>
        <!-- 查询表单 -->
        <section class="" id="reserve">
            <!-- 查询界面 -->
            <section id="check">
                <div class="container  pt-5 ">
                    <h1>嗨，您想去哪里？</h1>
                    <form>
                        <div class="row pt-5">
                            <div class=" col-5">
                                <input type="text" class="form-control" placeholder="出发城市" name="departureCity"
                                    id="departureCity1">
                            </div>
                            <div class="col-1">
                                <a href="#" id="exchange1">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor"
                                        class="bi bi-arrow-repeat " viewBox="0 0 16 16">
                                        <path
                                            d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z" />
                                        <path fill-rule="evenodd"
                                            d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z" />
                                    </svg>
                                </a>
                            </div>
                            <div class="col-5">
                                <input type="text" class="form-control" placeholder="到达城市" name="arrivalCity"
                                    id="arrivalCity1">
                            </div>
                        </div>
                        <div class="row pt-5">
                            <div class="input-group col">
                                <span class="input-group-text">出发人数</span>
                                <select class="form-select " id="num1">
                                    <option>1</option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                </select>
                            </div>
                            <div class="col input-group">
                                <span class="input-group-text">选择日期</span>
                                <input type="date" class="form-control" name="departureDate" id="datetimepicker1"
                                    aria-label="选择日期" value="">


                            </div>
                        </div>
                        <div class="row">
                            <button type="button" class="btn btn-primary ms-auto my-5 offset-md-4 col-md-3"
                                id="queryButton1">立即查询</button>
                        </div>
                    </form>
                </div>
            </section>
            <!-- 查询结果 -->
            <section id="flightBooking">
                <div class="container  pt-5">
                    <h1>航班信息</h1>
                    <!-- 查询表单 -->
                    <form>
                        <div class="row pt-2">
                            <div class="col">
                                <input type="text" class="form-control" placeholder="出发城市" name="departureCity"
                                    id="departureCity2">
                            </div>
                            <div class="col-1" width="30">
                                <a href="#" id="exchange2">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor"
                                        class="bi bi-arrow-repeat " viewBox="0 0 16 16">
                                        <path
                                            d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z" />
                                        <path fill-rule="evenodd"
                                            d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z" />
                                    </svg>
                                </a>
                            </div>
                            <div class="col">
                                <input type="text" class="form-control" placeholder="到达城市" name="arrivalCity"
                                    id="arrivalCity2">
                            </div>


                            <div class="input-group col">
                                <span class="input-group-text">出发人数</span>
                                <select class="form-select">
                                    <option>1</option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                </select>
                            </div>
                            <div class="col input-group">
                                <span class="input-group-text">选择日期</span>
                                <input type="date" class="form-control" name="departureDate" id="datetimepicker2"
                                    aria-label="选择日期">
                            </div>
                            <button type="button" class="btn btn-primary col-1" id="queryButton2">立即查询</button>
                        </div>
                    </form>
                    <div class="pt-5">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>航班信息</th>
                                    <th>起飞时间</th>
                                    <th>降落时间</th>
                                    <th>票价</th>
                                </tr>
                            </thead>
                            <tbody id="flightTable">
                                <!-- <tr>
                                    <td>
                                        <div class="row">
                                            <h2 class="col">北京</h2>
                                            <h4 class="col">CA1234</h4>
                                            <h2 class="col">南京</h2>
                                        </div>
                                    </td>
                                    <td>2022-6-7 12:20</td>
                                    <td>2022-6-7 14:20</td>
                                    <td>
                                        <div class="row">
                                            <div class="col">
                                                <div class="">商务舱</div>
                                                <div class="">1300</div>
                                                <button type="button" class=" btn btn-success businessClassButton"
                                                    id="">预定</button>
                                            </div>
                                            <div class="col">
                                                <div class="">经济舱</div>
                                                <div class="">800</div>
                                                <button type="button" class=" btn btn-success economyClassButton"
                                                    id="">预定</button>
                                            </div>
                                        </div>
                                    </td>
                                </tr> -->
                            </tbody>
                        </table>
                    </div>
            </section>
            <!-- 付款界面 -->
            <section id="payment">
                <div class="container  pt-5">
                    <h1 class="bg-info">航班信息</h1>
                    <div class="row" id="buyFlight">
                        <!-- <h2 class="col">北京</h2>
                        <h4 class="col">CA1234</h4>
                        <h2 class="col">南京</h2>
                        <div class="col">
                            <h4>出发时间</h4>
                            <h5>2022-6-7 12:20</h5>
                        </div>
                        <div class="col">
                            <h4>到达时间</h4>
                            <h5>2022-6-7 12:20</h5>
                        </div>
                        <div class="col">
                            <h4>价格</h4>
                            <h5>2000</h5>
                        </div> -->
                    </div>
                    <!-- 乘机人 -->
                    <h1 class="bg-info">乘机人信息</h1>
                    <form class="pt-5">
                        <div class="row">
                            <div class="input-group col">
                                <span class="input-group-text ">姓名</span>
                                <input type="text" class="form-control " placeholder="姓名" 
                                name="userName" id="passengerName">
                            </div>
                            <div class="input-group col">
                                <span class="input-group-text">身份证号</span>
                                <input type="text" class="form-control " placeholder="身份证号" 
                                name="userID" id="passengerID">
                            </div>
                        </div>
                    </form>
                    <button type="button" class="btn btn-danger  my-5 offset-md-4 col-md-2"
                                id="exitButton">返回</button>
                    <button type="button" class="btn btn-primary  my-5 col-md-2"
                                id="reserveButton">立即预定</button>
                </div>
            </section>
        </section>
        </section>
        <!-- 订单界面 -->
        <section id="orderInformation">
            <div class="container  pt-5">
                <h1>我的订单</h1>
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>订票日期</th>
                            <th>航班号</th>
                            <th>起飞日期</th>
                            <th>乘机人</th>
                            <th>席位信息</th>
                            <th>票价</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="orderTable">

                    </tbody>
                </table>
            </div>
        </section>
        <!-- 个人机票 -->
        <section id="airTicket">
            <div class="container  pt-5">
                <h1>我的行程</h1>
                <!-- 查询按钮 -->
                <form>
                    <div class="row pt-2">
                        <div class="col input-group">
                            <span class="input-group-text">航班号</span>
                            <input type="text" class="form-control" placeholder="航班号" name="flightNumber"
                                id="flightNumber">
                        </div>

                        <div class="col input-group">
                            <span class="input-group-text">起飞日期</span>
                            <input type="date" class="form-control" name="departureDate" id="datetimepicker3"
                                aria-label="选择日期" value="">
                        </div>
                        <button type="button" class="btn btn-primary col-1" id="queryButton3">立即查询</button>
                    </div>
                </form>
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>航班号</th>
                            <th>起飞时间</th>
                            <th>起飞地点</th>
                            <th>座舱类型</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="ticketInformation">

                    </tbody>
                </table>
            </div>
        </section>
    </div>
    <script src="js/jquery-3.0.0.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/main.js"></script>
</body>

</html>